// 主题混合样式文件
// 提供主题切换的 mixin 和变量

// 浅色主题变量
$light-theme: (
  // 背景色
  'bg-primary': #ffffff,
  'bg-secondary': #f8fafc,
  'bg-tertiary': #f1f5f9,
  
  // 文字颜色
  'text-primary': #1e293b,
  'text-secondary': #475569,
  'text-muted': #94a3b8,
  
  // 边框颜色
  'border-primary': #e2e8f0,
  'border-secondary': #cbd5e1,
  
  // 阴影
  'shadow-sm': rgba(0, 0, 0, 0.05),
  'shadow-md': rgba(0, 0, 0, 0.1),
  'shadow-lg': rgba(0, 0, 0, 0.15),
  
  // 主题色
  'primary': #667eea,
  'primary-hover': #5a67d8,
  'primary-light': #e0e7ff,
);

// 深色主题变量
$dark-theme: (
  // 背景色
  'bg-primary': #0f172a,
  'bg-secondary': #1e293b,
  'bg-tertiary': #334155,
  
  // 文字颜色
  'text-primary': #f1f5f9,
  'text-secondary': #cbd5e1,
  'text-muted': #64748b,
  
  // 边框颜色
  'border-primary': #334155,
  'border-secondary': #475569,
  
  // 阴影
  'shadow-sm': rgba(0, 0, 0, 0.3),
  'shadow-md': rgba(0, 0, 0, 0.4),
  'shadow-lg': rgba(0, 0, 0, 0.5),
  
  // 主题色
  'primary': #818cf8,
  'primary-hover': #6366f1,
  'primary-light': #312e81,
);

// 获取主题变量的函数
@function theme-var($key, $theme: 'light') {
  @if $theme == 'dark' {
    @return map-get($dark-theme, $key);
  } @else {
    @return map-get($light-theme, $key);
  }
}

// 主题混合器 - 同时定义浅色和深色样式
@mixin theme-styles($light-styles, $dark-styles) {
  // 默认浅色主题
  #{$light-styles}
  
  // 深色主题
  :global(.dark) & {
    #{$dark-styles}
  }
}

// 背景颜色混合器
@mixin bg-theme($level: 'primary') {
  background-color: theme-var('bg-#{$level}');
  
  :global(.dark) & {
    background-color: theme-var('bg-#{$level}', 'dark');
  }
}

// 文字颜色混合器
@mixin text-theme($level: 'primary') {
  color: theme-var('text-#{$level}');
  
  :global(.dark) & {
    color: theme-var('text-#{$level}', 'dark');
  }
}

// 边框颜色混合器
@mixin border-theme($level: 'primary') {
  border-color: theme-var('border-#{$level}');
  
  :global(.dark) & {
    border-color: theme-var('border-#{$level}', 'dark');
  }
}

// 阴影混合器
@mixin shadow-theme($level: 'md') {
  box-shadow: 0 4px 6px -1px theme-var('shadow-#{$level}'), 
              0 2px 4px -1px theme-var('shadow-#{$level}');
  
  :global(.dark) & {
    box-shadow: 0 4px 6px -1px theme-var('shadow-#{$level}', 'dark'), 
                0 2px 4px -1px theme-var('shadow-#{$level}', 'dark');
  }
}

// 主题色混合器
@mixin primary-theme() {
  background-color: theme-var('primary');
  
  &:hover {
    background-color: theme-var('primary-hover');
  }
  
  :global(.dark) & {
    background-color: theme-var('primary', 'dark');
    
    &:hover {
      background-color: theme-var('primary-hover', 'dark');
    }
  }
}

// 卡片样式混合器
@mixin card-theme() {
  @include bg-theme('primary');
  @include border-theme('primary');
  @include shadow-theme('md');
  border: 1px solid;
  border-radius: 8px;
}

// 输入框样式混合器
@mixin input-theme() {
  @include bg-theme('primary');
  @include text-theme('primary');
  @include border-theme('primary');
  border: 1px solid;
  
  &:focus {
    border-color: theme-var('primary');
    box-shadow: 0 0 0 3px theme-var('primary-light');
    
    :global(.dark) & {
      border-color: theme-var('primary', 'dark');
      box-shadow: 0 0 0 3px theme-var('primary-light', 'dark');
    }
  }
}

// 按钮样式混合器
@mixin button-theme($variant: 'primary') {
  @if $variant == 'primary' {
    @include primary-theme();
    color: white;
  } @else if $variant == 'secondary' {
    @include bg-theme('secondary');
    @include text-theme('primary');
    @include border-theme('primary');
    border: 1px solid;
    
    &:hover {
      @include bg-theme('tertiary');
    }
  }
}
